<template>
  <div>
    <el-table v-loading="loading" class="gl_table_noBorder" :data="tableData" size="mini">
      <el-table-column label="序号" type="index" :index="table_index" />
      <el-table-column prop="name" label="学员姓名" />
      <el-table-column label="性别">
        <template slot-scope="scope">
          {{ scope.row.genderCode ? formatGender(scope.row.genderCode) : '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="idCardNumber" label="证件号" />
      <el-table-column prop="className" label="上课班级" />
      <el-table-column prop="courseName" label="上课课程" />
      <el-table-column prop="swipingClassPeriod" label="应扣课时" />
      <el-table-column label="到课状态">
        <template slot-scope="{row}">
          <span v-if="row.isAttendClass">
            <i class="iconfont icon_state gl_color_success" style="vertical-align: middle;" />
            <span class="gl_pl_5">到课</span>
          </span>
          <span v-if="!row.isAttendClass">
            <i class="iconfont icon_state gl_color_grey" style="vertical-align: middle;" />
            <span class="gl_pl_5">未到</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="签到时间">
        <template slot-scope="{row}">
          <span v-if="row.signInTime">{{ row.signInTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row class="gl_mt_15" style="text-align: right;">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="selectedMsg.MaxResultCount"
        :current-page="selectedMsg.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import {
  Api_GET_ClubStudentCardsSwipingLogListSudentMembershipCardIdQO // 分页获取学生卡片的消课信息
} from '@/lib/form/hall/swaggerForm';
import {
  api_GET_ClubStudentCardsSwipingLogListSudentMembershipCardId // 分页获取学生卡片的消课信息
} from '@/extend/api/hallswaggerApi/app';
export default {
  data () {
    return {
      selectedMsg: new Api_GET_ClubStudentCardsSwipingLogListSudentMembershipCardIdQO(),
      loading: false,
      total: 0,
      tableData: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getPageList();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    getPageList(page) {
      if (this.$route.params && this.$route.params.id) {
        this.loading = true;
        api_GET_ClubStudentCardsSwipingLogListSudentMembershipCardId(this.$route.params.id, this.selectedMsg).then(res => {
          this.loading = false;
          this.tableData = res.items;
          this.total = res.totalCount;
        }, error => {
          this.loading = false;
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      }
    },
    // 处理性别
    formatGender(genderCode) {
      let _gender;
      if (this.dict && this.dict.gender && genderCode) {
        _gender = this.dict.gender.find(item => item.code === genderCode);
      }
      _gender = _gender ? _gender.value : '';
      return _gender;
    },
    // 分页
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.selectedMsg.MaxResultCount = pagesize;
      this.getPageList();
    },
    // 序号递增
    table_index(index) {
      return (this.selectedMsg.Page - 1) * this.selectedMsg.MaxResultCount + index + 1;
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
